<template>
<div>
  <el-swiper :list="swiper" />
  <ul class="bar">
    <li v-for="(item,index) of bar"
        @click="active = index"
        :class="{'active':active===index}">
      {{item}}
    </li>
  </ul>
  <div>
    <van-card
        v-for="item of list"
        :key="item.id"
        @click="$router.push(`/ndetail?id=${item.id}&type=${active}`)"
        :title="item.title"
        :thumb="item.img || ''"
    >
      <template #tags>
        <van-tag style="margin: 10px 4px 10px 0;" plain type="danger">浏览量:{{item.hits}}</van-tag>
        <div>
          {{item.createTime}}
        </div>
        <div style="height: 48px;overflow: hidden;margin: 10px 0;color: gray">
          <div v-html="item.content"></div>
        </div>
      </template>
      <template #footer>
        <van-button
            type="primary"
            size="mini">
          阅读更多
        </van-button>
      </template>
    </van-card>


  </div>
<div style="text-align: center">
  <van-button @click="npg" v-if="list.length < total" type="primary">
    点击加载
  </van-button>
</div>
  <van-empty v-if="!list.length" description="暂无更多～" />

</div>
</template>

<script>
import { getNews,getHD } from "@/api/news";
import {getSwiper} from "@/api/swiper";

export default {
  name: "news",
  data() {
    return {
      active:0,
      bar:[
          '新闻',
          '专业科普',
          '活动'
      ],
      type:[
        'xwzx',
        'zykp',
        'zxhd'
      ],
      current:1,
      total:0,
      list:[],
      swiper:[]
    }
  },
  watch:{
    active(){
      this.current = 1
      this.list = []
      this.getNew()
    }
  },
  created() {
    this.getNew()
    getSwiper().then(({records})=>{
      this.swiper = records
    })
  },
  methods: {
    async getNew(){
      let res = null
      if (this.active===2){
        res = await getHD({
          current:this.current,
          size:10
        })
      }else {
        res = await getNews({
          resourceClass:this.type[this.active],
          current:this.current,
          size:10
        })
      }
      console.log(res.records)
      this.list = this.list.concat(res.records)
      this.total = res.total
      this.current = res.current

    },
    npg(){
      this.current++
      this.getList()
    }
  }
}
</script>

<style scoped>
.bar{
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #99CC00;
}
.bar li{
  flex: 1;
  line-height: 40px;
  text-align: center;
}
.bar li.active{
  background-color: #e3e4e5;
}
</style>
